<td-message
  label="Deprecation Notice"
  sublabel="This component will be deprecated in favor of a different implementation"
  color="warn"
  icon="warning"
  class="push-bottom-md"
  *ngIf="component?.showMigration"
>
  <a
    td-message-actions
    mat-button
    target="_blank"
    [href]="component?.migrationUrl"
    class="mat-button"
    >View doc</a
  >
</td-message>
<div class="push-bottom-xxl pad-bottom-xxl">
  <div class="pad-right-sm pad-left-sm push-bottom-lg">
    <h1 class="mat-h1 content-title push-bottom-sm text-caps">
      {{ component?.name }}
    </h1>
    <h3 class="mat-h3 tc-td-secondary" [style.maxWidth.px]="500">
      {{ component?.description }}
    </h3>
  </div>

  <nav
    mat-tab-nav-bar
    color="accent"
    class="push-bottom-lg"
    [tabPanel]="tabPanel"
  >
    <a
      mat-tab-link
      *ngFor="let link of navLinks"
      [routerLink]="link.route"
      routerLinkActive="active"
      #rla="routerLinkActive"
      [active]="rla.isActive"
    >
      {{ link.name | uppercase }}
    </a>
  </nav>

  <mat-tab-nav-panel #tabPanel>
    <router-outlet></router-outlet>
  </mat-tab-nav-panel>
</div>
